import React from 'react';
import { Row, Col, Form } from 'antd';
import { RangeSelectC, FirstHeaderC, SecondHeaderC } from '../../components';

class RangeSelectCDemo extends React.Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
  }

  change = () => {
    console.log(this.formRef.current.getFieldsValue());
    this.formRef.current.setFieldsValue({ 9: '666' });
  };

  render() {
    return (
      <Form ref={this.formRef}>
        <Row style={{ padding: '20px' }}>
          <FirstHeaderC title='RangeSelect' />
          <Col>
            <SecondHeaderC title='场景一' />
            <RangeSelectC
              title='区间选择' // 显示名称
              dataIndex={['a', 'b']} // Form识别的Item ID
              dataSource={[
                [
                  { title: 1, value: 1 },
                  { title: 2, value: 2 },
                ],
                [
                  {
                    title: 'a',
                    value: 'a',
                  },
                  {
                    title: 'b',
                    value: 'b',
                  },
                ],
              ]}
              onChange={(e) => console.log(e)}
              helper='help提示信息'
              formItemLayout={{ labelCol: { span: 6 }, wrapperCol: { span: 10 } }}
            />
          </Col>
          <Col>
            <SecondHeaderC title='场景二' />
            <RangeSelectC
              title='区间选择' // 显示名称
              dataIndex={['c', 'd']} // Form识别的Item ID
              // dataSource={(['A', 'B', 'C'], ['C', 'B', 'A'])}
              onChange={(e) => console.log(e)}
              helper='help提示信息'
              initialValue={[2022, 2023]}
              disabled={true}
            />
          </Col>
        </Row>
      </Form>
    );
  }
}

export default RangeSelectCDemo;
